
/*
 * @项目名称: 模板开发
 * @FilePath: /meek/src/renderer/render/pointrender.js
 * @Author: 
 * @Date: 2017-03-23T11:12:12+08:00
 * @LastEditors: 
 * @LastEditTime: 2020-08-04T10:28:10+08:00
 * Copyright (c) 2018-2022
 */

/**
 * Created by zhangyong on 2017/3/20.
 */
import GeometryRender from '../render/geomertyrender'
import LineStyle from '../../style/linestyle'

import { colorToString } from '../../utils/helpers'
import { Transform } from '../../data/matrix/transform'
import PointStyle from "../../style/pointstyle"

export default class PointRender extends GeometryRender {

  constructor(context) {
    super(context)

    this._pixelCoordinates = []
  }

  /**
   * Render a point
   * @param feature
   * @param transform
   */
  render(feature, renderStyle, transform) {
    if (!feature) {
      return
    }

    const ctx = this.context
    const styleArray = renderStyle
    const geomerty = feature.geometry

    const coordinates = [geomerty.x, geomerty.y]

    // TODO  Should be cached
    const pixelCoordinates = Transform.transform2D(
      coordinates, 0, coordinates.length, 2,
      transform, this._pixelCoordinates)

    const x = pixelCoordinates[0]
    const y = pixelCoordinates[1]

    const len = styleArray.length
    for (let i = 0; i < len; i++) {
      let styleObj = styleArray[i]

      let renderOptions = {
        centerX: (x + 0.5) | 0,
        centerY: (y + 0.5) | 0,
        radius: styleObj.size / 2 || styleObj.borderStyle.width / 2,
        fillStyle: colorToString(styleObj.color, styleObj.alpha),
        borderStyle: styleObj.borderStyle
      }
      switch (styleObj.style) {
        case PointStyle.CIRCLE:
          this.drawCircle(ctx, renderOptions)
          break;
        case PointStyle.RING:
          this.drawRing(ctx, renderOptions)
          break;
        case PointStyle.X:
          this.drawX(ctx, renderOptions)
      }
    }
  }

  drawRing(ctx, renderOptions) {
    // console.log('类型为圆，开始绘制圆')
    // 开始绘制外层圆
    ctx.save()

    ctx.beginPath()
    ctx.arc(renderOptions.centerX, renderOptions.centerY,
      renderOptions.radius, 0, 2 * Math.PI, true)

    const borderStyle = renderOptions.borderStyle
    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width
      ctx.stroke()
    }
    ctx.closePath()
    ctx.restore()

    // 绘制内层实心点
    console.log("begin to draw point")
    ctx.beginPath()
    ctx.save()

    ctx.arc(renderOptions.centerX, renderOptions.centerY,
      0.5, 0, 2 * Math.PI, true)

    if (renderOptions.fillStyle) {
      ctx.fillStyle = renderOptions.fillStyle
      ctx.fill()
    }

    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width
      ctx.stroke()
    }
    ctx.closePath()

    ctx.restore()
  }

  drawCircle(ctx, renderOptions) {
    // console.log('类型为圆，开始绘制圆')
    ctx.save()
    ctx.beginPath()
    ctx.arc(renderOptions.centerX, renderOptions.centerY,
      renderOptions.radius, 0, 2 * Math.PI, true)

    if (renderOptions.fillStyle) {
      ctx.fillStyle = renderOptions.fillStyle
      ctx.fill()
    }

    const borderStyle = renderOptions.borderStyle
    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width

      /*
      if (borderStyle.lineDash) {
        ctx.setLineDash(borderStyle.lineDash)
      }
      */

      if (borderStyle.style === LineStyle.DASH) {
        ctx.setLineDash([5, 5])
      } else if (borderStyle.style === LineStyle.DASHDOT) {
        ctx.setLineDash([10, 3, 3, 3]);
      }

      ctx.stroke()
    }

    ctx.closePath()
    ctx.restore()
  }

  drawX(ctx, renderOptions) {
    ctx.save()
    ctx.beginPath()
    ctx.moveTo(renderOptions.centerX, renderOptions.centerY)
    ctx.lineTo(renderOptions.centerX + 8, renderOptions.centerY - 12);
    ctx.moveTo(renderOptions.centerX, renderOptions.centerY)
    ctx.lineTo(renderOptions.centerX - 8, renderOptions.centerY - 12);
    ctx.moveTo(renderOptions.centerX, renderOptions.centerY)
    ctx.lineTo(renderOptions.centerX - 8, renderOptions.centerY + 12);
    ctx.moveTo(renderOptions.centerX, renderOptions.centerY)
    ctx.lineTo(renderOptions.centerX + 8, renderOptions.centerY + 12);
    const borderStyle = renderOptions.borderStyle
    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width;

      if (borderStyle.lineDash) {
        ctx.setLineDash(borderStyle.lineDash)
      }

      ctx.stroke()
    }

    ctx.closePath()
    ctx.restore()
  }
}
